<script setup lang="ts">
import {ref} from 'vue';
import {onLaunch, onLoad, onPullDownRefresh, onReachBottom, onShow} from "@dcloudio/uni-app";
import {reqGetOrderList, reqDeleteOrder, reqPayOrder} from "@/api/order";

const list = ['全部', '未付款', '待收货', '待评价']
const current = ref(0)
const status = ref(-1)
const dataList = ref<any>([])
onLoad(() => {
  getOrderList()
})

const change = (index: any) => {
  if (current.value == index) {
    return;
  }
  isData.value = true
  dataList.value = []
  current.value = index
  switch (current.value) {
    case 0:
      status.value = -1
      break;
    case 1:
      status.value = 0
      break;
    case 2:
      status.value = 1
      break;
    case 3:
      status.value = 2
      break
  }
  getOrderList()
}
const info = ref({
  page: 1,
  limit: 10
})
const getOrderList = async () => {
  if (isLoading.value) {
    isLoading.value = false
    await reqGetOrderList({
      page: info.value.page,
      limit: info.value.limit,
      status: status.value,
    }).then((res: any) => {
      if (res.code == 200) {
        if (res.data.length > 0) {
          res.data.forEach((item: any) => {
            if (item.status == "5" || item.status == "6") {
              item.orderItems.forEach((itemChild: any) => {
                let orderItem = {...item}
                orderItem.orderItems = [itemChild]
                dataList.value.push(orderItem)
              })
            } else {
              dataList.value.push(item)
            }
          })
        } else {
          isData.value = false
        }
      }
      isLoading.value = true
      uni.stopPullDownRefresh()
    })
  }
}

onReachBottom(async () => {
  if (isData.value) {
    info.value.page++
    await getOrderList();
  }
})

const isData = ref(true)
const isLoading = ref(true)
const back = () => {
  uni.navigateBack({
    delta: 1
  })
}

const refresh = () => {
  change(3)
}

onPullDownRefresh(() => {
  dataList.value = []
  info.value.page = 1
  isData.value = true
  getOrderList()
})

const options = [{
  text: '删除',
  style: {
    backgroundColor: '#f56c6c'
  }
}]

const remove = (id: any) => {
  uni.showModal({
    title: '提示',
    content: '确定删除该订单吗？',
    success: async (res) => {
      if (res.confirm) {
        await reqDeleteOrder({
              id: id
            }
        ).then((res: any) => {
          if (res.code == 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'none'
            })
            dataList.value = []
            info.value.page = 1
            isData.value = true
            getOrderList()
          }
        })
      }
    }
  })
}

const show = ref(false)

const close = () => {
  show.value = false
}
onShow(() => {
  dataList.value = []
  info.value.page = 1
  isData.value = true
  getOrderList()
})

//支付
const toPlay = async () => {
  await reqPayOrder({orderId: orderId.value}).then((res: any) => {
    show.value = false
    if (res.code == 200) {
      uni.navigateTo({
        url: '/pages/user/order/orderSuccess/orderSuccess?orderNo=' + orderId.value
      })
    } else {
      uni.showToast({
        title: '支付失败，请再次重试',
        icon: 'none'
      })
    }
  })
}
const orderId = ref('')
const orderPrice = ref('')
const pay = (id: any, price: any) => {
  orderId.value = id
  orderPrice.value = price
  show.value = true
}
</script>

<template>
  <view class="bar"></view>

  <view>
    <u-sticky customNavHeight="0" bgColor="#fff">
      <view class="top-bar">
        <u-icon name="arrow-left" color="#909399" size="28" @click="back()"></u-icon>
        <u-search style="margin-left: 15rpx" placeholder="搜索" :animation="true"></u-search>
      </view>
      <subsection :list="list" :current="current" @change="change"></subsection>
    </u-sticky>

    <u-swipe-action v-if="dataList.length>0">
      <u-swipe-action-item
          @click="remove(item.orderId)"
          v-for="(item,index) in dataList"
          :key="item.orderId"
          :options="options"
      >

        <order-item @refresh="refresh" @pay="pay" :item="item"
                    :index="item.orderId"></order-item>


      </u-swipe-action-item>
    </u-swipe-action>


    <u-empty
        v-else
        mode="order"
        icon="http://cdn.uviewui.com/uview/empty/order.png"
    >
    </u-empty>

  </view>
  <u-divider
      v-if="!isData && dataList.length>0"
      text="没有更多数据了~"
  ></u-divider>

  <u-action-sheet round="30" :show="show" @close="close()">
    <view style="padding: 20rpx;position: relative">
      <view style="margin: 40rpx 0;">
        <text style="font-size: 40rpx;font-weight: 600">支付订单</text>
        <text style="position: absolute;right: 40rpx;top: 40rpx;font-size: 50rpx;font-weight: 600" @click="close()">
          ×
        </text>
      </view>
      <text style="color: #B0B0B0">书香阁</text>
      <view class="play-price">
        ￥{{ orderPrice }}
      </view>
      <view style="height: 150rpx"></view>
      <view class="immediately-play-btn" @click="toPlay()">
        立即支付
      </view>
    </view>
  </u-action-sheet>
</template>

<style scoped lang="scss">
.immediately-play-btn {
  width: 80vw;
  margin: 20rpx;
  font-size: 30rpx;
  color: white;
  border-radius: 50rpx;
  line-height: 60rpx;
  bottom: 20rpx;
  background: #29AB65;
  padding: 15rpx 40rpx;
}

.play-price {
  width: 90vw;
  margin: 20rpx;
  font-size: 60rpx;
  font-weight: 600;
  color: black;

}

.top-bar {
  display: flex;
  align-items: center;
  line-height: 80rpx;
  padding: 25rpx 20rpx;
}
</style>
